<template>
  <div class="home-left-center-top-wrapper">
    <comp-title v-if="dataSet.leftCenterTop" :text="title"
      ref="compTitle"></comp-title>
    <div class="box-bg"
      ref="box">
      <custom-legend v-model="legens"
        ref="customLegend"
        class="hone-custom-legend"></custom-legend>
<!--      <div class="supply">-->
<!--        <div class="supply-bg"-->
<!--          ref="supplyName">-->
<!--          <div class="supply-name" v-if="dataSet.leftCenterTop">{{dataSet.leftCenterTop.supplyName}}</div>-->
<!--        </div>-->
<!--        <div class="acens supply-value"-->
<!--          ref="supplyValue">{{supplyDept}}</div>-->
<!--      </div>-->
      <div class="chart-box"
        ref="chartBox" v-if="dataSet.leftCenterTop ? true : false">
        <div class="chart"
          style="width:422px;height:206px"
          ref="chart"></div>
      </div>
      <svg version="1.1"
        class="box-bd-bg"
        x="0px"
        y="0px"
        viewBox="0 0 420.8 13.4"
        style="enable-background:new 0 0 420.8 13.4;"
        xml:space="preserve">
        <path class="st0"
          d="M334.3,8.4h81v5h-86L334.3,8.4z" />
        <path class="st1"
          d="M0.3,0.4l13.5,11h311.5l5-6h90v5" />
      </svg>
    </div>
  </div>
</template>
<script>
import CompTitle from '@/components/common/compTitle.vue'
import CustomLegend from '@/components/common/customLegend1.vue'
import { mapState } from 'vuex'
import { util } from 'dtc'
import axios from 'axios'
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'leftCenterTop',
  components: {
    CompTitle,
    CustomLegend
  },
  model: {},
  props: {},
  data() {
    return {
      title:'活动创建情况',
      legens: [
        {
          name: '营销活动',
          color: '#035ef0'
        },
        {
          name: '场景营销',
          color: '#00f7fa'
        },
        {
          name: '常规营销',
          color: '#FFFF00'
        }
      ],
      chart: {},
      option: {},
      charDataArray:[]
    }
  },
  computed: {
    ...mapState(['dataSet']),
    // supplyDept() {
    //   if(this.dataSet.leftCenterTop){
    //     return this.dataSet.leftCenterTop.supplyDept
    //   }
    // },

    chartData() {
      if(this.charDataArray){
        return this.charDataArray
      }
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getData();
  },
  beforeDestroy() {},
  methods: {
    getData(){
      var data = { 'account': '2020-06', 'tenant_id': 'uni099'}
      var marketActivity={name:'营销活动',"color": "#035ef0",data:new Array(31)};
      var sceneMarket={name:'场景营销',"color": "#00f7fa",data:new Array(31)};
      var regularMarket={name:'常规营销',"color": "#FFFF00",data:new Array(31)};
      axios.post(apiUrl + 'api/bigscreen/activeCreate', data).then(res => {
        if (res.data.length>0){
          for (var i = 0 ; i < res.data.length ; i++){
            var item = res.data[i];
            var dayId=parseInt(item.day_id);
            var activityCount=item.activity_count;
            if (item.activity_type.trim()=='营销活动'){
              marketActivity.data[dayId]=activityCount;
            }
            if (item.activity_type.trim()=='场景营销'){
              sceneMarket.data[dayId]=activityCount;
            }
            if (item.activity_type.trim()=='常规营销'){
              regularMarket.data[dayId]=activityCount;
            }
          }
        }
        this.charDataArray.push(marketActivity)
        this.charDataArray.push(sceneMarket)
        this.charDataArray.push(regularMarket)
      }).catch(err => {
        console.log(err)
      })
    },
    initOption() {
      this.chart = this.$echarts.init(this.$refs.chart)
      let option = {
        grid: {
          top: 10,
          left: 60,
          right: 20,
          bottom: 30
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#085cf8'
            }
          },
          padding: 0,
          backgroundColor: 'transpparent',
          formatter: function(params) {
            let str = ``
            let len = params.length
            for (let i = len - 1; i >= 0; i--) {
              const { color, value } = params[i]
              str += `<p style='color: ${color}; line-height: 1'>${value}</p>`
            }
            return str
          },
          position: function(point) {
            return point.map(p => {
              return p + 10
            })
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            splitLine: { show: false },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#0151d1'
              }
            },
            axisLabel: {
              color: '#e7d9a4',
              fontFamily: 'acens'
            },
            axisLine: {
              lineStyle: {
                color: '#11224c'
              }
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              margin: 4,
              color: '#e7d9a4',
              fontFamily: 'acens',
              formatter: '{value}',
              rich: {
                a: {
                  fontFamily: 'sans-serif',
                  color: '#88cbff'
                }
              }
            },
            axisLine: {
              lineStyle: {
                color: '#11224c'
              }
            }
          }
        ],
        color: ['#085cf8', '#36f3fe', '#bc4e1e'],
        series: []
      }
      this.option = option
    },
    setChartData() {
      let s = [],
        x = []
      for (let i = 1; i <=31 ; i++) {
        x.push(i);
      }
      this.option.xAxis[0].data = x
      for (let i = 0; i < this.chartData.length; i++) {
        s.push({
          name: this.chartData[i].name,
          type: 'line',
          // stack: '总量',
          symbolSize: 0,
          lineStyle: { normal: { width: 1 } },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.chartData[i].color
                },
                {
                  offset: 1,
                  color: 'transparent'
                }
              ])
            }
          },
          data: this.chartData[i].data
        })
      }
      this.option.series = s
      this.chart.setOption(this.option)
    },
    init() {
      let tl = new TimelineMax({})
      // let supplyName = TweenMax.to(this.$refs.supplyName, 0.3, { opacity: 1 })
      // let supplyValue = TweenMax.to(this.$refs.supplyValue, 0.3, { opacity: 1 })
      let chartBox = TweenMax.to(this.$refs.chartBox, 0.3, { opacity: 1 }),
        box = TweenMax.to(this.$refs.box, 0.5, { opacity: 1 })
      tl.addLabel('start')
        .add(this.initOption, 'start')
        .add(this.$refs.compTitle.init(), 'start+=0')
        .add(box, 'start+=0.5')
        .add(this.$refs.customLegend.init(), 'start+=0.5')
        // .add(supplyName, 'start+=0.6')
        // .add(supplyValue, 'start+=0.7')
        .add(chartBox, 'start+=0.8')
        .add(this.setChartData, 'start+=0.8')
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.home-left-center-top-wrapper {
  position: relative;

  width: 100%;
  height: 100%;

  font-family: Arial, Helvetica, sans-serif;

  .box-bg {
    background: linear-gradient(0deg, #035ef01a, transparent);

    opacity: 0;
  }
  .supply {
    display: flex;
    align-items: center;

    position: absolute;
    top: 30px;

    height: 34px;

    font-size: 12px;
    .supply-bg {
      position: relative;

      padding: 2px 3px;

      background: linear-gradient(90deg, #00f6fa58, transparent) no-repeat
          content-box,
        linear-gradient(#005cf01a, #005cf01a);

      opacity: 0;

      &:after,
      &:before {
        display: block;

        position: absolute;
        top: 0;

        width: 5px;
        height: 22px;

        content: '';
      }
      &:after {
        right: 0;

        border: 1px solid #00f7fa;
        border-left: none;
      }
      &:before {
        left: 0;

        border: 1px solid #00f7fa;
        border-right: none;
      }
    }
    .supply-name {
      padding: 0 24px;

      color: rgba(255, 255, 255, 0.6);
    }
    .supply-value {
      margin-left: 8px;
      padding: 0 14px;
      font-size: 24px;
      line-height: 24px;
      color: #fff;
      background: #00f6fa33;

      opacity: 0;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), 1px 1px 6px #00f6fa66,
        1px -1px 6px #00f7fa66, -1px 1px 4px #00f7fa66, -1px -1px 6px #00f7fa66;
    }
  }
  .chart-box {
    position: absolute;
    top: 70px;

    width: 100%;
    height: 200px;

    opacity: 0;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
.hone-custom-legend {
  position: absolute;
  top: 30px;
  left: 0;

  width: 100%;
  
}
.st0 {
  fill: #00f7fa;
}
.st1 {
  fill: none;
  stroke: #00f7fa;
}
.box-bd-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>
